<template>
  <div class="home">
    <div class="header">
      <div class="banner" v-if="!bannerList.length">
        <img src="../assets/img/defultPage/bannerDefault.png" alt="">
      </div>
      <div class="banner" v-else>
        <mt-swipe :auto="4000">
          <mt-swipe-item v-for="(item,index) in bannerList" :key="index">
            <img :src="item.imgUrl" alt="">
          </mt-swipe-item>
        </mt-swipe>
      </div>
      
      <div class="location" @click="goCity">
        <img class="img1" src="../assets/img/icon/home/add.png" alt="">
        <span class="city">{{cityName}}</span>
        <img class="img2" src="../assets/img/icon/home/unfold1.png" alt="">
      </div>
    </div>
    <div class="listBox">
      <div class="latest">
        <div class="shortLine"></div>
        <div>近期直采</div>
      </div>
      <div class="listPicBox">
        <div class="item" v-for="(item,index) in homeList" :key="index" @click="goDetail(item.actId)">
          <div class="img">
            <img :src="item.listLogoUrl" alt="">
            <div class="countBox" v-if="item.type==='1'">
              <img src="../assets/img/icon/home/hot.png" alt="">
              <i>距离开团：</i>
              <Count v-on:end_callback="countDownE_cb()" :currentTime="item.realTime" :startTime="item.realTime" :endTime="item.startTime1" dayTxt="天" :hourTxt="'时'" :minutesTxt="'分'" :secondsTxt="''"></Count>
            </div>
            <div class="statusEnd" v-if="item.type==='3'">
              <div class="statusEndIn">
                已结束
              </div>
            </div>
          </div>
          <div class="statusBox">
            <div class="statusTop">
              <div class="imgBox"  v-if="item.type==='1'">
                <img class="statusTopImg"    src="../assets/img/tips/reportHome.png" alt="">
              </div>
              <div class="imgBox" v-if="item.type==='2'">
                <img class="statusTopImg"   src="../assets/img/tips/goingHome.png" alt="">
              </div>
              <div class="imgBox" v-if="item.type==='3'">
                <img class="statusTopImg"   src="../assets/img/tips/ending.png" alt="">
              </div>
              <div class="dateMall">{{item.name}}</div>
            </div>
            <div class="statusBt">开团日期：<span><span class="day">{{item.startDay}}</span>{{item.startTime|formatTime}} <span>/ 第{{item.actNum}}场</span></span></div>
          </div>
        </div>
      </div>
      <infinite-loading @infinite="activeList">
        <span slot="no-more" style="color:#ccc">
          更多活动，敬请期待！
        </span>
      </infinite-loading>
    </div>
    <div class="person">
      <router-link :to="{name:'mine'}" class="router_link">
        <div class="vipImg">
          <img src="../assets/img/icon/home/hPerson.png" alt="">
        </div>
        <div>
          我的
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import api from "../api/index.js";
import Count from "../components/count";
import axios from "axios";
import { photoPre, localSiteId } from "../common/util/index.js";
import { Toast, Swipe, SwipeItem } from "mint-ui";
import InfiniteLoading from "vue-infinite-loading";

export default {
  name: "home",
  components: {
    Count,
    InfiniteLoading
  },
  data() {
    return {
      detailInfo: {},
      cityName: "",
      bannerList: [],
      page: 1,
      pageSize: 10,
      homeList: [],
      homeList1: [],
      homeList: [],
      type: "",
      isLoad: false
    };
  },
  created() {
    this.urlIp = getParam("urlIp");
    this.selectCityName = localStorage.getItem("siteName");
    getParam("fromuId");
    localStorage.setItem("fromuId", getParam("fromuId"));
    this.bannerReq();
    this.cityListReq();
    // console.log(this.$route.query.siteId)
    // this.selectCityName = this.$route.query.cityName;
  },
  methods: {
    cityReq() {
      let that = this;
      let cip = returnCitySN["cip"];
      // console.log(this.urlIp)
      // if(cip) {
      let params = {
        // ip: cip
        ip: this.urlIp ? this.urlIp : cip //给测试用
      };
      api.cityApi(params).then(res => {
        // console.log(res)
        if ((res.msgCode = "000")) {
          if (res.data) {
            if (!this.selectCityName) {
              this.cityName = res.data;
              this.curCity = res.data;
            } else {
              this.cityName = this.selectCityName;
            }
            if (this.cityName) {
              let cityId = this.cityArr.filter(
                item => item.mobileName == this.cityName
              );
              if (cityId.length) {
                if (!this.selectCityName) {
                  console.log(cityId)
                  localStorage.setItem("siteId", cityId[0].siteId);
                }
              }else {
                this.cityName = "武汉";
                let cityId = this.cityArr.filter(
                  item => {
                    if(item.mobileName == this.cityName){
                      return item.siteId
                    }
                  }
                );
                localStorage.setItem("siteId", cityId[0].siteId);
              }
            }
            this.activeList();
          } else {
            this.cityName = "武汉";
            let cityId = this.cityArr.filter(
                  item => {
                    if(item.mobileName == this.cityName){
                      return item.siteId
                    }
                  }
                );
                localStorage.setItem("siteId", cityId[0].siteId);
                this.activeList();
          }
        } else {
          Toast({
            message: res.msg,
            position: "middle",
            duration: 5000
          });
        }
      });
      // }
    },
    cityListReq() {
      let obj = {};
      api.cityListApi(obj).then(res => {
        // console.log(res)
        if ((res.msgCode = "000")) {
          this.cityArr = res.data.list;
          this.cityReq();
        } else {
          Toast({
            message: res.msg,
            position: "middle",
            duration: 5000
          });
        }
      });
    },
    bannerReq() {
      let obj = {
        bannerPosition: "6"
      };
      api.bannerApi(obj).then(res => {
        // console.log(res)
        if ((res.msgCode = "000")) {
          this.bannerList = res.data;
          this.bannerList.map(item => {
            item.imgUrl = photoPre + item.imgUrl;
          });
        } else {
          Toast({
            message: res.msg,
            position: "middle",
            duration: 5000
          });
        }
      });
    },
    // runTwo() {
    //   let arr = [this.activeList1(null,'1'),this.activeList2(null,'2')];
    //   return arr.reduce(function(promise,arr) {
    //     return promise.then(arr)
    //   },Promise.resolve())
    // },
    // runThree($state,type) {
    //   Promise.all([this.activeList1(null,'1'),this.activeList2(null,'2')]).then(()=> {
    //     this.activeList($state,type)
    //   })
    // },
    activeList($state, type) {
      console.log(localStorage.getItem("siteId"))
      if(!localStorage.getItem("siteId")) {
        $state.loaded()
        $state.complete()
        return;
      }
      let obj = {
        siteId: localStorage.getItem("siteId"),
        // siteId: '116',
        // type: type,
        page: this.page,
        pageSize: this.pageSize
      };
      if ($state) {
        obj.page = this.page;
        obj.pageSize = this.pageSize;
        // obj.type = '3'
      }
      api.activeListApi(obj).then(res => {
        if ((res.msgCode = "000")) {
          this.page++;
          this.dataSolve(res.data.list);
          if($state) {
            $state.loaded();
            if (!res.data.hasNextPage) {
              $state.complete();
            }
          }
          
        } else {
          Toast({
            message: res.msg,
            position: "middle",
            duration: 5000
          });
        }
      });
    },
    //
    dataSolve(arr, type) {
      arr.map(item => {
        item.listLogoUrl = photoPre + item.listLogoUrl;
        item.realTime = new Date(item.realTime.replace(/-/g,'/')).getTime();
        item.startTime1 = new Date(item.startTime.replace(/-/g,'/')).getTime();
        let startTime = item.startTime;
        startTime = startTime.split(" ")[0];
        startTime = startTime.split("-");
        item.startDay = `${startTime[1]}月${startTime[2]}日`;
      });
       this.homeList = this.homeList.concat(arr);
    },
    goDetail(actId) {
      this.$router.push({
        path: "/detail",
        query: {
          id: actId
        }
      });
    },
    goCity() {
      // this.$router.push({
      //   path: "/cityList",
      //   query: {
      //     name: this.curCity
      //   }
      // });
       this.$router.push({
        path: "/jbc110",
        query: {
          name: this.curCity
        }
      });
    },
    countDownE_cb(e) {}
  }
};
function getParam(str, search) {
  // alert(str);
  var query = search || window.location.href;
  console.log(query);
  let splits = query.split(/\?|#|&/);
  for (var i = 0; i < splits.length; i++) {
    var equal = splits[i].split("=");
    if (equal[0] == str) return equal[1];
  }
  return undefined;
}
</script>
<style scoped lang="less">
.home {
  min-height: 100vh;
}
.header {
  text-align: center;
  position: relative;
}
.banner {
  width: 100%;
  img {
    width: 100%;
  }
}

.mint-swipe /deep/ .mint-swipe-indicator.is-active {
  background-color: rgba(247, 54, 87, 1);
  opacity: 0.9;
}

.mint-swipe /deep/ .mint-swipe-indicator {
  background-color: rgba(255, 255, 255, 1);
  opacity: 0.6;
  width: 10px;
  height: 2.5px;
  border-radius: 3px;
}
.location {
  // width: 100px;
  height: 30px;
  position: absolute;
  top: 10px;
  left: 16px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  text-align: left;
  padding-left: 13.5px;
  padding-right: 11.5px;
  display: flex;
  align-items: center;
  box-shadow: 0px 1px 10px 0px rgba(8, 13, 26, 0.08);
  .img1 {
    width: 14px;
  }
  .img2 {
    width: 11px;
  }
  .city {
    font-size: 13px;
    color: #1f1f21;
    margin: 0 5px 0 6px;
  }
}
.listBox {
  padding: 0 16px 15px;
  box-sizing: border-box;
}
.latest {
  font-weight: bold;
  font-size: 16px;
  color: #333;
  padding: 15px 0 12px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  .shortLine {
    width: 2px;
    height: 16px;
    background-color: #f73657;
    margin-right: 8px;
  }
}
.itemSha {
  position: relative;
}
.statusEnd {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  display: -webkit-flex;
  .statusEndIn {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
}
.listPicBox {
  .item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    box-shadow: 0px 2px 8px 0px rgba(31, 28, 92, 0.05);
    border-radius: 3px;
    background-color: #fff;
    .img {
      position: relative;
      width: 100%;
      // height: 200px;
      background-color: #eee;
      img {
        display: block;
        border-radius: 3px 3px 0 0;
      }
      .countBox {
        z-index: 10;
        position: absolute;
        left: 15px;
        bottom: 7.5px;
        background-color: rgba(51, 51, 51, 0.8);
        height: 17.5px;
        // padding: 3px 6px;
        height: 17.5px;
        line-height: 17.5px;
        display: flex;
        align-items: center;
        font-size: 10px;
        color: #fff;
        img {
          width: 12px;
          margin-right: 4px;
          display: block;
        }
      }
    }
    .statusBox {
      // margin-top: 12.5px;
      padding: 12.5px 15px 0 15px;
      .statusTop {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-family: PingFangSC-Regular;
        .imgBox{
          width: 47px;
          margin-right: 8.5px;
        }
        img {
          //  vertical-align: top;
            width: 100%;
            // height: 100%;
            // vertical-align:middle;
        }
        
        // img {
        //   width: 40px;
        //   margin-right: 8.5px;
        // }
        .dateMall {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          font-weight: bold;
          flex: 1;
          line-height: 16px;
          height: 16px;
        }
        font-size: 14px;
        color: #222;
        margin-bottom: 8px;
      }
    }
    .statusBt {
      font-size: 12px;
      color: #555;
      text-align: center;
      .day {
        margin-right: 6px;
      }
    }
  }
}
.person {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  position: fixed;
  right: 23px;
  bottom: 40px;
  font-size: 9px;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #fff;
  box-shadow: 0px 0px 5px 0px 
		rgba(0, 0, 0, 0.1);
	border: solid 1px #eeeeee;
	opacity: 0.95;
  .vipImg {
    text-align: center;
  }
  img {
    width: 18px;
    margin-bottom: 4px;
  }
}
</style>

